---
title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content.
---

import { CommandTabs } from "@docs/components/command-tabs";
import { ExternalLinks } from "@docs/components/external-links";
import { PreviewCard } from "@docs/components/preview-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@docs/components/ui/tabs";
import { AccordionPreview } from "@docs/components/examples";
import { Step, Steps } from 'fumadocs-ui/components/steps';              

<ExternalLinks
  links={[
    { title: 'Docs', url: 'https://rnprimitives.com/accordion/' },
    { title: 'API Reference', url: 'https://rnprimitives.com/accordion/#props' },
  ]}
/>
 
<div className="h-5"/>

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <div id="preview" className='*:hidden scroll-m-20' aria-hidden>
      ## Preview
    </div>
    <PreviewCard preview={<AccordionPreview />}  />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/accordion.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    } 
    ```
  </TabsContent>
</Tabs>


## Installation

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger id="cli" value="cli">CLI</TabsTrigger>
    <TabsTrigger id="manual" value="manual">Manual</TabsTrigger>
  </TabsList>
  <TabsContent value="cli">
    <Steps>
      <Step>
        <CommandTabs args={["add", "accordion"]}/>
      </Step>
      <Step>

        **Update `tailwind.config.js`**

        Add the following animations to your tailwind.config.js file:

        ```js title="tailwind.config.js"
        /** @type {import('tailwindcss').Config} */
        module.exports = {
          theme: {
            extend: {
              keyframes: {
                'accordion-down': {
                  from: { height: '0' },
                  to: { height: 'var(--radix-accordion-content-height)' },
                },
                'accordion-up': {
                  from: { height: 'var(--radix-accordion-content-height)' },
                  to: { height: '0' },
                },
              },
              animation: {
                'accordion-down': 'accordion-down 0.2s ease-out',
                'accordion-up': 'accordion-up 0.2s ease-out',
              },
            },
          },
        }
        ```

      </Step>
    </Steps>
  </TabsContent>
  <TabsContent value="manual">
    <Steps>
      <Step>
 
        **Install the following dependency:**

        ```
        npx expo install @rn-primitives/accordion
        ```

      </Step>
      <Step>
 
        **Copy and paste the following code into your project.**

          ```json doc-gen:file
          {
            "file": "./node_modules/@rnr/registry/src/new-york/components/ui/text.tsx",
            "codeblock": {
              "lang": "tsx",
              "meta": "title=\"@/components/ui/text.tsx\""
            }
          }
          ```

          ```json doc-gen:file
          {
            "file": "./node_modules/@rnr/registry/src/new-york/components/ui/icon.tsx",
            "codeblock": {
              "lang": "tsx",
              "meta": "title=\"@/components/ui/icon.tsx\""
            }
          }
          ```
          
          ```json doc-gen:file
          {
            "file": "./node_modules/@rnr/registry/src/new-york/components/ui/accordion.tsx",
            "codeblock": {
              "lang": "tsx",
              "meta": "title=\"@/components/ui/accordion.tsx\""
            }
          }
          ```
      </Step>
      <Step>

        **Update the import paths to match your project setup.**

      </Step>
      <Step>

        **Update `tailwind.config.js`**

        Add the following animations to your tailwind.config.js file:

        ```js title="tailwind.config.js"
        /** @type {import('tailwindcss').Config} */
        module.exports = {
          theme: {
            extend: {
              keyframes: {
                'accordion-down': {
                  from: { height: '0' },
                  to: { height: 'var(--radix-accordion-content-height)' },
                },
                'accordion-up': {
                  from: { height: 'var(--radix-accordion-content-height)' },
                  to: { height: '0' },
                },
              },
              animation: {
                'accordion-down': 'accordion-down 0.2s ease-out',
                'accordion-up': 'accordion-up 0.2s ease-out',
              },
            },
          },
        }
        ```

      </Step>
    </Steps>
  </TabsContent>
</Tabs>

### Usage

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { Text } from '@/components/ui/text';
```

```tsx
<Accordion type='single' collapsible>
  <AccordionItem value='item-1'>
    <AccordionTrigger>
      <Text>Is it accessible?</Text>
    </AccordionTrigger>
    <AccordionContent>
      <Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
    </AccordionContent>
  </AccordionItem>
</Accordion>
```
